<template>
  <div class="reba-rawmaterial-deposit-container" v-loading="loading">
    <div class="left-warp">
      <div class="chart-dom" ref="drawerBarChart"></div>
    </div>
    <div class="right-warp">
      <div class="bar-item">
        <div
          class="item-data"
          :style="{ height: getH(dataSource.materialWarehousing || 0) + '%' }"
        >
          <div class="value">
            {{ Number(dataSource.materialWarehousing || 0).toLocaleString() }}
          </div>
        </div>
        <div class="label">原材总进料</div>
      </div>
      <div class="bar-item">
        <div
          class="item-data"
          :style="{ height: getH(dataSource.materialConsumption || 0) + '%' }"
        >
          <div class="value">
            {{ Number(dataSource.materialConsumption || 0).toLocaleString() }}
          </div>
        </div>
        <div class="label">原材总消耗</div>
      </div>
      <div class="bar-item">
        <div
          class="item-data"
          :style="{ height: getH(dataSource.materialInventory || 0) + '%' }"
        >
          <div class="value">
            {{ Number(dataSource.materialInventory || 0).toLocaleString() }}
          </div>
        </div>
        <div class="label">原材总库存</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from "@/tools";
import { lcMaterial } from "@/api/wisdom-beam/home";
export default {
  data() {
    return {
      loading: false,
      dataSource: {},
      chartBar: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { tenantCode } = getLoginData();
        lcMaterial({ tenantCode })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            let {
              materialConsumption = 0,
              materialInventory = 0,
              materialWarehousing = 0,
            } = source;
            source.$$total = materialWarehousing;
            this.dataSource = source;
            resolve();
          })
          .catch((_) => {
            this.dataSource = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
            this.$nextTick(() => {
              this.drawerBarChart();
            });
          });
      });
    },
    drawerBarChart() {
      let chart_dom = this.$refs["drawerBarChart"];
      this.chartBar = this.$echarts.init(chart_dom);
      let color = "#666666";
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 50,
          right: 20,
          itemWidth: 16,
          itemHeight: 8,
        },
        grid: {
          top: 90,
          left: 60,
          bottom: 60,
          right: 20,
        },
        xAxis: {
          data: this.dataSource?.dates ?? [],
          axisLabel: {
            rotate: 20,
            color,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "单位：吨",
          nameTextStyle: {
            fontSize: 14,
            color,
            padding: [0, 0, 4, -30],
          },
          axisLabel: {
            color,
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "原材进料",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.warehousings ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#68E1B2" },
                { offset: 1, color: "#09C87E" },
              ]),
            },
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 12, // 调整文本大小
                color: "#666666", // 调整文本颜色
              },
            },
          },
          {
            name: "原材消耗",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.consumptions ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#1EC7FF" },
                { offset: 1, color: "#317EF2" },
              ]),
            },
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 12, // 调整文本大小
                color: "#666666", // 调整文本颜色
              },
            },
          },
          {
            name: "原材库存",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.inventorys ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#7070E3" },
                { offset: 1, color: "#BDA1F7" },
              ]),
            },
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 12, // 调整文本大小
                color: "#666666", // 调整文本颜色
              },
            },
          },
        ],
      };
      this.chartBar.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },

    getH(val = 0) {
      let { $$total = 0 } = this.dataSource;
      let pec = (val / $$total ?? 0) * 100;
      return pec;
    },
  },
  destroyed() {
    this.chartBar && this.chartBar.dispose();
  },
};
</script>

<style lang="less" scoped>
.reba-rawmaterial-deposit-container {
  height: 100%;
  width: 100%;
  .flex();
  .left-warp {
    flex-shrink: 0;
    flex: 1;
    position: relative;
    .chart-dom {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
  .right-warp {
    flex-shrink: 0;
    width: 300px;
    height: 100%;
    .flex();
    justify-content: center;
    box-sizing: border-box;
    padding-top: 32px;
    .bar-item {
      width: 26px;
      height: 143px;
      .flex();
      flex-direction: column;
      align-items: center;
      position: relative;
      &:not(:first-child) {
        margin-left: 54px;
      }
      &:nth-child(1) {
        .item-data {
          background: url("https://jszhgd.cn/static/pc/beamyard/3d_2.png");
          background-size: 100% 100%;
          color: #1ccd89;
        }
      }
      &:nth-child(2) {
        .item-data {
          background: url("https://jszhgd.cn/static/pc/beamyard/3d_1.png");
          background-size: 100% 100%;
          color: #3ca5ef;
        }
      }
      &:nth-child(3) {
        .item-data {
          background: url("https://jszhgd.cn/static/pc/beamyard/3d_3.png");
          background-size: 100% 100%;
          color: #9570ef;
        }
      }
      .item-data {
        width: 100%;
        background: red;
        position: absolute;
        left: 0;
        bottom: -62px;
        .value {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -30px;
          font-size: 18px;
        }
      }
      .label {
        position: absolute;
        .flex();
        flex-wrap: nowrap;
        white-space: nowrap;
        left: -18px;
        bottom: -100px;
        transform: rotate(-20deg);
        width: 80px;
        height: 30px;
        z-index: 2;
        color: #666666;
        font-size: 14px;
      }
    }
  }
}
</style>
